<template>
  <KView class="coupon-tao-page">
    <coupon-bg-view @to-back="toBack" @search-data="toSearchData">
      <template v-if="isShow">
        <classify-tab :classify-list="couponClassifyList" :select-tab.sync="selectTab" @change="toSearchClassifyData"></classify-tab>
        <KView class="coupon-tao-page-list" :key="showTab">
          <coupon-data-view :coupon-list="couponList" :pagination="pagination" :next-data-fun="setCouponList"></coupon-data-view>
        </KView>
      </template>
    </coupon-bg-view>
  </KView>
</template>

<script>
  import SystemUtil from 'utils/systemUtil';
  import CouponApi from 'services/couponApi';

  import CouponBgView from 'views/couponPage/components/couponBgView';
  import ClassifyTab from 'views/couponPage/components/classifyTab';
  import CouponDataView from './couponDataView';

  export default {
    props: {
      hasBack: {
        type: Boolean,
        default: true
      }
    },

    data() {
      return {
        isShow: false,
        isMiniprogram: process.env.isMiniprogram,
        couponClassifyList: [],
        selectTab: '',
        showTab: '',
        couponList: [],
        pagination: {
          currentPage: 1,
          hasNext: true
        }
      };
    },

    created() {
      SystemUtil.showLoading('');
      this.setCouponClassifyList().then(couponClassifyList => {
        this.selectTab = couponClassifyList[0];
        return this.setCouponList(true).then(() => {
          this.isShow = true;
          SystemUtil.hideLoading();
        });
      }).catch(() => {
        SystemUtil.hideLoading();
      });
    },

    methods: {
      setCouponClassifyList() {
        return CouponApi.getTaoCouponClassifyList().then(couponClassifyList => {
          this.couponClassifyList = couponClassifyList;
          return couponClassifyList;
        });
      },

      setCouponList(isInit = false, pagination = null) {
        if (pagination === null) {
          pagination = this.pagination;
        }

        let selectTab = this.selectTab;
        return CouponApi.getTaoCouponData(pagination, selectTab).then(couponList => {
          if (couponList.length === 0) {
            pagination.hasNext = false;
          }

          if (isInit) {
            this.couponList = couponList;
          } else {
            this.couponList.push(...couponList);
          }

          if (this.showTab !== selectTab) {
            this.showTab = selectTab;
          }
          return couponList;
        });
      },

      toSearchClassifyData() {
        let pagination = {
          currentPage: 1,
          hasNext: true
        };
        SystemUtil.showLoading('');
        this.setCouponList(true, pagination).then(() => {
          this.pagination = pagination;
          SystemUtil.hideLoading();
        }).catch(() => {
          SystemUtil.hideLoading();
        });
      },

      toSearchData() {
        let url = '/couponTaoSearchPage';
        if (this.isMiniprogram) {
          window.open(url);
        }
      },

      toBack() {
        if (!this.isMiniprogram) {
          window.history.back();
          return;
        }

        if (this.hasBack) {
          wx.navigateBack();
        } else {
          this.$emit('to-page', '/home');
        }
      }
    },

    components: {
      CouponBgView,
      ClassifyTab,
      CouponDataView
    }
  };

</script>

<style lang="scss">
  .coupon-tao-page {
    height: 100%;

    .coupon-tao-page-list {
      height: calc(100% - #{formatPx(100)});
      padding-top: formatPx(40);
      overflow: auto;
    }
  }

</style>
